<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 表格js
import { h } from 'vue'
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'
import http from '@/http';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
//获取当前页相关用户数据的方法

const checkItemName = ref('');
console.log
const tableData = ref();
function getPage() {
  http.get('/hcr/all2', {
    params: {
      checkItemName: checkItemName.value,
    }
  }
  )
    .then((res) => {
      checkItemName.value = ''
      console.log(res)
      tableData.value = res
    })
}

console.log("aa" + tableData)

onMounted(() => {
  getPage();
})
</script>
<template>
  <form>
    <div id="sousuokuang">
      <ul>
        <li>项目名称&nbsp;&nbsp;<input type="text" class="sou" placeholder="项目名称" v-model="checkItemName"></li>
        <li><el-button type="primary" :icon="Search" style="height: 25px;" @click="getPage">搜索</el-button></li>
        <li><input type="reset"
            style="background-color: #409eff; width: 80px; height: 25px; color: aliceblue; border: 0px; border-radius: 10%;">
        </li>
      </ul>
    </div>
  </form>
  <!-- 表格 -->
  <el-table :data="tableData" border show-summary style="width: 100%;">
    <el-table-column property="checkItemName" label="项目名称" />
    <el-table-column property="price" sortable label="总金额" />
    <el-table-column property="num" sortable label="检查次数" />
  </el-table>
</template>
<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

ul li {
  list-style: none;
  float: left;
  padding-left: 20px;
}

#sousuokuang {
  height: 50px;
}

.sou {
  height: 20px;
}
</style>
